<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义元素拖拽指令</title>
    <style type="text/css">
        .div1{
            width:100px;
            height: 100px;
            background-color: aqua;
            position:absolute;
            top:0;
            left: 0;

        }
    </style>
</head>
<body>
<div id="wrap">
    <div v-drag class="div1"> </div>
</div>
</body>
</html>
<script src="vue.js"></script>
<script type="text/javascript">
    Vue.directive('drag', function () {
            var odiv=this.el;
            odiv.onmousedown=function (ev) {
                var disX=ev.clientX-odiv.offsetLeft;
                var disY=ev.clientY-odiv.offsetTop;
                console.log(disX)
                document.onmousemove=function (ev) {
                    var l=ev.clientX-disX;
                    var t=ev.clientY-disY;
                    odiv.style.left=l+'px';
                    odiv.style.top=t+'px';
                }
                document.onmouseup=function () {
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
            }
    })
    window.onload = function () {
        var vm = new Vue({
            el: '#wrap',
            data: {
                a1: 'red',
            },
            methods: {}
        });
    }


</script>